<template>
  <a-list
    v-if="!searchLoading"
    class="content-list"
    :max-height="400"
    :data="list"
    :bordered="false"
    @reach-bottom="handleLoadPost"
  >
    <template #item="{ item, index }">
      <a-list-item
        :key="index"
        class="content-list-item"
        action-layout="vertical"
        @click="handleClickItem(item)"
      >
        <template #actions>
          <a-space class="list-item-actions">
            <div class="action-item">
              <a-space size="mini">
                <icon-eye class="action-icon" />
                <span class="action-count">
                  {{ item.viewNum }}
                </span>
              </a-space>
            </div>
            <div class="action-item">
              <a-space size="mini">
                <icon-thumb-up class="action-icon" />
                <span class="action-count">
                  {{ item.thumbNum }}
                </span>
              </a-space>
            </div>
            <div class="action-item">
              <a-space size="mini">
                <icon-star class="action-icon" />
                <span class="action-count">
                  {{ item.favourNum }}
                </span>
              </a-space>
            </div>
          </a-space>
        </template>
        <template #extra>
          <span class="post-time">{{ item.createTime }}</span>
        </template>
        <a-list-item-meta :title="item.title" class="list-item-meta">
          <template #description>
            <div class="post-tags-container">
              <a-tag color="blue" size="small" class="zone-tag">{{ item.zoneName || '综合' }}</a-tag>
              
              <div class="tag-list">
                <template v-if="item.tags && item.tags.length > 0">
                  <a-tag 
                    v-for="(tag, tagIndex) in item.tags" 
                    :key="tagIndex"
                    :color="getTagColor(tagIndex)"
                    size="small"
                    class="content-tag"
                  >
                    {{ tag }}
                  </a-tag>
                </template>
              </div>
              
              <a-typography-text ellipsis class="post-content">
              {{ item.content }}
            </a-typography-text>
            </div>
          </template>
          <template #avatar>
            <a-popover position="right" trigger="hover" class="avatar-popover">
              <template #content>
                <div class="user-card">
                <a-space size="medium">
                    <a-avatar :image-url="item.avatar" class="user-avatar" />
                  <a-space direction="vertical">
                      <a-typography-title bold class="user-name">
                      {{ item.creatorName }}
                    </a-typography-title>
                    <a-typography-paragraph
                      type="secondary"
                        class="user-intro"
                      :ellipsis="{
                        rows: 1,
                        showTooltip: {
                          type: 'tooltip',
                          props: {
                            position: 'bottom'
                          }
                        }
                      }"
                    >
                      {{ item.introduce }}
                    </a-typography-paragraph>
                  </a-space>
                </a-space>
                </div>
              </template>
              <a-avatar shape="square" :image-url="item.avatar" class="post-avatar" />
            </a-popover>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
    <template #empty>
      <div class="empty-state">
        <icon-search class="empty-icon" />
        <p class="empty-text">未找到相关帖子</p>
      </div>
    </template>
    <template #footer>
      <div v-if="list.length && paging.pageNum >= totalPage" class="list-footer">
        <a-divider>已经到底了</a-divider>
      </div>
    </template>
  </a-list>
  <a-skeleton v-else-if="searchLoading" animation class="loading-skeleton">
    <a-space direction="vertical" :style="{ width: '100%' }" size="large">
      <a-skeleton-line
        :rows="5"
        :widths="['40%', '100%', '100%', '100%', '50%']"
      />
    </a-space>
  </a-skeleton>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { OjPostService } from '@/api/gen-api/services/OjPostService.ts';
import { OjPostQueryRequest, type OjPostVo, Paging } from '@/api/gen-api';
import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';

const tagColors = ['blue', 'green', 'orange', 'purple', 'cyan', 'red', 'gray'];
const getTagColor = (index: number) => {
  return tagColors[index % tagColors.length];
};

const list = ref<OjPostVo[]>([]);
const totalPage = ref();
const paging = ref<Paging>({
  pageNum: 1,
  pageSize: 10
});
const req = ref<OjPostQueryRequest>({
  title: ''
});

const searchPost = (postTitle: string) => {
  paging.value.pageNum = 1;
  req.value.title = postTitle;
  list.value = [];
  searchLoading.value = true;
  getPostList();
};
defineExpose({
  searchPost
});
const getPostList = () => {
  OjPostService.page({ page: paging.value, req: req.value })
    .then(res => {
      if (res.result.records) {
        totalPage.value = res.result.totalPage;
        list.value.push(...res.result.records);
        console.log('搜索帖子列表数据:', list.value);
      }
    })
    .finally(() => {
      searchLoading.value = false;
    });
};

const handleLoadPost = () => {
  if (paging.value.pageNum >= totalPage.value) {
    Message.warning('没有更多了');
  } else {
    paging.value.pageNum++;
    getPostList();
  }
};

const emit = defineEmits(['closeModal']);
const handleCloseModal = () => {
  emit('closeModal', true);
};
const searchLoading = ref(false);
const router = useRouter();
const handleClickItem = (item: OjPostVo) => {
  handleCloseModal();
  router.push({
    name: 'PostInfo',
    query: {
      postId: item.id
    }
  });
};
</script>

<style scoped lang="less">
.content-list {
  background-color: var(--color-bg-2);
  border-radius: 12px;
  border: 1px solid rgba(39, 89, 205, 0.2);
  box-shadow: 0 4px 16px rgba(39, 89, 205, 0.08);
  padding: 8px 0;
  max-height: 400px;
  overflow-y: auto;

  &-item {
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(39, 89, 205, 0.08);
    padding: 16px;

    &:last-child {
      border-bottom: none;
    }
    
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 3px;
      background-color: #2759CD;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
  }

  &-item:hover {
    cursor: pointer;
    background-color: rgba(39, 89, 205, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 89, 205, 0.08);
    
    &::after {
      opacity: 1;
    }
    
    .action-icon {
      color: #2759CD;
    }
    
    .post-avatar {
      transform: scale(1.05);
    }
    
    .list-item-meta :deep(.arco-list-item-meta-title) {
      color: #2759CD;
    }
  }
}

.list-item-meta {
  :deep(.arco-list-item-meta-title) {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text-1);
    transition: color 0.3s ease;
    line-height: 1.4;
  }
}

.post-tags-container {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  
  .zone-tag {
    margin-right: 8px;
    margin-bottom: 6px;
    font-weight: 500;
    background-color: rgba(39, 89, 205, 0.08);
    border-color: rgba(39, 89, 205, 0.2);
    color: #2759CD;
  }
  
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  
  .content-tag {
    margin-right: 6px;
    margin-bottom: 6px;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
    }
  }
  
  .post-content {
    display: block;
    margin-top: 8px;
    color: var(--color-text-2);
    line-height: 1.6;
    font-size: 14px;
  }
}

.list-item-actions {
  margin-top: 4px;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  
  &:hover {
    background-color: rgba(39, 89, 205, 0.08);
  }
}

.action-icon {
  font-size: 14px;
  color: var(--color-text-3);
  transition: color 0.3s ease;
}

.action-count {
  font-size: 13px;
  color: var(--color-text-3);
  margin-left: 4px;
}

.post-time {
  font-size: 12px;
  color: var(--color-text-3);
  padding: 2px 8px;
  border-radius: 10px;
  background-color: var(--color-fill-2);
}

.post-avatar {
  border-radius: 6px;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.user-card {
  padding: 8px;
  min-width: 220px;
  
  .user-avatar {
    width: 48px;
    height: 48px;
    border: 2px solid rgba(39, 89, 205, 0.2);
  }
  
  .user-name {
    font-size: 16px !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2;
  }
  
  .user-intro {
    font-size: 13px;
    margin: 0;
    width: 140px;
    color: var(--color-text-3);
  }
}

:deep(.arco-list-scroll) {
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(39, 89, 205, 0.3);
    border-radius: 4px;

    &:hover {
      background-color: rgba(39, 89, 205, 0.5);
    }
  }

  &::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  
  .empty-icon {
    font-size: 40px;
    color: rgba(39, 89, 205, 0.3);
    margin-bottom: 12px;
  }
  
  .empty-text {
    font-size: 14px;
    color: var(--color-text-3);
  }
}

.list-footer {
  padding: 8px 16px;
  text-align: center;
  
  :deep(.arco-divider-text) {
    font-size: 13px;
    color: var(--color-text-3);
  }
}

.loading-skeleton {
  padding: 16px;
  background-color: var(--color-bg-2);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(39, 89, 205, 0.08);
}

/* Responsive styles */
@media (max-width: 768px) {
  .content-list {
    max-height: 320px;
    border-radius: 8px;
  }
  
  .content-list-item {
    padding: 12px;
  }
  
  .list-item-meta {
    :deep(.arco-list-item-meta-title) {
      font-size: 15px;
    }
  }
  
  .post-content {
    font-size: 13px;
  }
}
</style>
